import React ,{Component} from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardTitle, CardText, Row, Col,Media,Container } from 'reactstrap';
import classnames from 'classnames';
import CSSModules from 'react-css-modules';
import styles from './index.scss';
import { connect } from 'react-redux';
import { fetchList ,display_name} from '../../actions/communitypic';
import ReactQuill from 'react-quill';
import axios from 'axios';
const mapStateToProps = state => {
    // console.log(state);
    return {
      lists: state.communitypic.lists,
    };
  };

class Community extends Component{
    handlerSearch=(event)=>{
        var id = this.refs.search.nodeValue;
        this.props.history.push(`user/${id}`)
    }
    //搜索框，点击进行跳转
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state  = {
          activeTab   : '1',
          defaultImage: true,
          display_name: 'none',   //此状态机为display的取值 
          text        : '',
          list        : {}
    
        };
      }
    componentWillMount(){
        axios({
            // url   : 'http://localhost:3000/people',
            url   : 'http://47.92.98.104:8080/zhuiying/qunzu',
            method: 'post',
            params: {groupname:'电影幸存者'}
        }).then(res=>{
            this.setState({
                list: res.data.data
                
            });
            console.log(this.state.list);
        });
    }
    showList=()=>{
        
        var lst1 = this.state.list;
        var jsx  = [];
                jsx.push(
                    <li key={1}>
                        {/*<img src={lst1[i].img}></img>*/}
                        <p>{lst1.groupname}</p>                      
                        <p>{lst1.persons}</p>                      
                    </li>
            )
        // }      
        return jsx;
    }
 componentDidMount() {
    this.props.fetchList();
    this.showList();
    }
  
  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }
  updateClick () {
    this.setState({
      defaultImage: !this.state.defaultImage
    })
  }
  
  display_name() { //编辑按钮的单击事件，修改状态机display_name的取值
        if (this.state.display_name == 'none') {
            this.setState({
                display_name: 'block',
            })
        }
        else if (this.state.display_name == 'block') {
            this.setState({
                display_name: 'none',
            })
        }
    }
    getEditorContent=()=>{
        var content = this.refs.quillEditor.getEditorContents();
        // console.log(content);
    };
  render() {
    var toolbarOptions = [
        [{
          'header': [1, 2, 3, 4, 5, 6, false]
        }],
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],
        [{
          'header': 1
        }, {
          'header': 2
        }], // custom button values
        [{
          'list': 'ordered'
        }, {
          'list': 'bullet'
        }],
        [{
          'script': 'sub'
        }, {
          'script': 'super'
        }], // superscript/subscript
        [{
          'indent': '-1'
        }, {
          'indent': '+1'
        }], // outdent/indent
        [{
          'direction': 'rtl'
        }], // text direction
        [{
          'size': ['small', false, 'large', 'huge']
        }], // custom dropdown
        [{
          'color': []
        }, {
          'background': []
        }], // dropdown with defaults from theme
        [{
          'font': []
        }],
        [{
          'align': []
        }],
        ['link', 'image'],
        ['clean'] // remove formatting button
      ];
    var lst = (this.props.lists)[0];
        // console.log(this.props.lists);
    var styleObj = {
        backgroundImage: this.state.defaultImage? `url(${"../../../images/home/attention.jpg"})`: `url(${"../../../images/home/yiAttention.jpg"})`
      } 
    return (
        
      <div>
        <Container>
            <Row>
                <Col sm={{ size: '12', offset:0 }}>
                    <Nav tabs>
                        <NavItem>
                            <NavLink
                            className = {classnames({ active: this.state.activeTab === '1' })}
                            onClick   = {() => { this.toggle('1'); }}
                            >
                            推送
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                            className = {classnames({ active: this.state.activeTab === '2' })}
                            onClick   = {() => { this.toggle('2'); }}
                            >
                            群组2
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                            className = {classnames({ active: this.state.activeTab === '3' })}
                            onClick   = {() => { this.toggle('3'); }}
                            >
                            交友
                            </NavLink>
                        </NavItem>
                        <div styleName="search">                          
                            <input ref="search" type="text" placeholder="请输入.."/>
                            <button onClick={this.handlerSearch}></button>
                        </div>
                    </Nav>
                    <TabContent activeTab={this.state.activeTab} style={{margin:40}}>
                        <TabPane tabId="1">
                            <Container>
                                    <Row>
                                    <Col sm={{ size: '8', offset: 0 }} styleName="comment-line">
                                        <CardTitle styleName="hot-comment">热门评论</CardTitle>
                                        <CardText>
                                        <Media>
                                            <Media top href="#">
                                                <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                            </Media>
                                            <Media body styleName="push-body">
                                                <Media heading styleName="push-comment">
                                                《西虹市首富》在给人欢笑之余，带来哪些反思?
                                                </Media>
                                                <span styleName="grade-name">Kelly</span>评《<span styleName="grade-name">西虹市首富</span>》 <span styleName="grade-num">8.0</span><br/>
                                                <span styleName="push-detail"></span>
                                                <a href="javascript:;" styleName="push-more">查看全文</a>
                                                <br/>
                                                <ReactQuill modules={{toolbar: toolbarOptions}} value={this.state.text} ref="quillEditor" />
                                                <button onClick={this.getEditorContent}>getEditorContent</button>
                                                {/* <input type="text" placeholder="发表评论" styleName="push-input"></input>*/} 
                                                <img src="/images/vip/xinxi.png"/>
                                            </Media>
                                            <Media  href="#" styleName="film-photo">
                                               
                                            </Media>
                                        </Media> 
                                        <hr/>
                                        </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media top href="#">
                                                <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                            </Media>
                                            <Media body styleName="push-body">
                                                <Media heading styleName="push-comment">
                                                《西虹市首富》在给人欢笑之余，带来哪些反思?
                                                </Media>
                                                <span styleName="grade-name">Kelly</span>评《<span styleName="grade-name">西虹市首富</span>》 <span styleName="grade-num">8.0</span><br/>
                                                <span styleName="push-detail">“目前的大陆喜剧，可说有两大派系分庭抗礼。一个是徐峥宁浩的黑色幽默。其创作风格，是把搞笑当作外衣,</span>
                                                <a href="javascript:;" styleName="push-more">查看全文</a>
                                                <br/>
                                                <input type="text" placeholder="发表评论" styleName="push-input"></input>
                                                <img src="/images/vip/xinxi.png"/>
                                            </Media>
                                            <Media  href="#" styleName="film-photo">
                                                <img src="/images/vip/111.jpg" style={{width:128,height:158}}></img>
                                            </Media>
                                        </Media> 
                                        <hr/>
                                        </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media top href="#">
                                                <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                            </Media>
                                            <Media body styleName="push-body">
                                                <Media heading styleName="push-comment">
                                                《西虹市首富》在给人欢笑之余，带来哪些反思?
                                                </Media>
                                                <span styleName="grade-name">Kelly</span>评《<span styleName="grade-name">西虹市首富</span>》 <span styleName="grade-num">8.0</span><br/>
                                                <span styleName="push-detail">“目前的大陆喜剧，可说有两大派系分庭抗礼。一个是徐峥宁浩的黑色幽默。其创作风格，是把搞笑当作外衣,</span>
                                                <a href="javascript:;" styleName="push-more">查看全文</a>
                                                <br/>
                                                <input type="text" placeholder="发表评论" styleName="push-input"></input>
                                                <img src="/images/vip/xinxi.png"/>
                                            </Media>
                                            <Media  href="#" styleName="film-photo">
                                                <img src="/images/vip/111.jpg" style={{width:128,height:158}}></img>
                                            </Media>
                                        </Media> 
                                        <hr/>
                                        </CardText> 

                                    </Col>
                                    <Col sm={{ size: '4', offset: 0 }} style={{paddingLeft:60}} >
                                        <CardTitle styleName="hot-comment">热门群组</CardTitle> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="recommend-body">
                                                    <Media heading styleName="recom-group">
                                                    影视杂谈|八卦闲谈
                                                    </Media>
                                                    <p>成员: 36045</p>
                                                </Media>                                
                                            </Media>
                                            <div>
                                            </div>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                影视资源分享
                                                </Media>
                                                <p styleName="join-number">成员: 6530</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                    </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                影视片源集中地
                                                </Media>
                                                <p styleName="join-number">成员: 5177</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                    </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                推理影视
                                                </Media>
                                                <p styleName="join-number">成员: 2467</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                    </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                锋点点影视 免费看最新电影电视
                                                </Media>
                                                <p styleName="join-number">成员: 3518</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                    </CardText> 
                                        <CardText>
                                        <Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                影视.电影
                                                </Media>
                                                <p styleName="join-number">成员: 1546</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                    </CardText> 
                                    </Col>
                                </Row>
                            </Container>
                        </TabPane>
                        <TabPane tabId="2">
                            <Container>
                                <Row>
                                    <Col sm={{ size: '7', offset: 0 }} styleName="hot-comment">
                                        <CardTitle styleName="hot-comment">推荐群组</CardTitle>  
                                             
                                            
                                             <CardText>
                                             <Media>
                                                 <Media top href="#">
                                                     <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                 </Media>
                                                 <Media body styleName="recommend-body">
                                                 {this.showList()}
                                                     <p styleName="recom-detail">专业美剧字幕组~！！！专业美剧制作站~网址 http:   //www.yyets.net/</p>
                                                 </Media>
                                             </Media>
                                             <hr/>
                                         </CardText> 
                                             <CardText>
                                             <Media>
                                                 <Media top href="#">
                                                     <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                 </Media>
                                                 <Media body styleName="recommend-body">
                                                     <Media heading styleName="recom-group">
                                                     人人影视二分队
                                                     </Media>
                                                     <p styleName="recom-detail"> 成员                       : 3045</p>
                                                     <p styleName="recom-detail">专业美剧字幕组~！！！专业美剧制作站~网址 http:           //www.yyets.net/</p>
                                                 </Media>
                                             </Media>
                                             <hr/>
                                         </CardText> 
                                             <CardText>
                                             <Media>
                                                 <Media top href="#">
                                                     <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                 </Media>
                                                 <Media body styleName="recommend-body">
                                                     <Media heading styleName="recom-group">
                                                     人人影视二分队
                                                     </Media>
                                                     <p styleName="recom-detail"> 成员                       : 3045</p>
                                                     <p styleName="recom-detail">专业美剧字幕组~！！！专业美剧制作站~网址 http:           //www.yyets.net/</p>
                                                 </Media>
                                             </Media>
                                             <hr/>
                                         </CardText> 
                                         <CardText>
                                             <Media>
                                                 <Media top href="#">
                                                     <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                 </Media>
                                                 <Media body styleName="recommend-body">
                                                     <Media heading styleName="recom-group">
                                                     影视.电影
                                                     </Media>
                                                     <p styleName="recom-detail">成员: 5075</p>
                                                     <p styleName="recom-detail">电影爱好者的聚集地 分享和交流高质量的电影....</p>
                                                 </Media>
                                             </Media>
                                             <hr/>
                                         </CardText> 
                                         <CardText>
                                             <Media>
                                                 <Media top href="#">
                                                     <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                 </Media>
                                                 <Media body styleName="recommend-body">
                                                     <Media heading styleName="recom-group">
                                                     集合影视
                                                     </Media>
                                                     <p styleName="recom-detail"> 成员: 3045</p>
                                                     <p styleName="recom-detail">全体集合专属影视小组 任何帖子都随时有跑题到八卦Bripop的可能..此谓集合特色 欢迎篡改小组图标OR简介......[集合小组本部:http://www.douba...</p>
                                                     </Media>
                                             </Media>
                                             <hr/>
                                         </CardText> 
                                         <CardText>
                                                 <Media>
                                                     <Media top href="#">
                                                         <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                     </Media>
                                                     <Media body styleName="recommend-body">
                                                         <Media heading styleName="recom-group">
                                                         影视网站会员共享
                                                         </Media>
                                                         <p styleName="recom-detail"> 成员: 3045</p>
                                                         <p styleName="recom-detail">全体集合专属影视小组 任何帖子都随时有跑题到八卦Bripop的可能..此谓集合特色 欢迎篡改小组图标OR简介......[集合小组本部:http://www.douba...</p>
                                                         </Media>
                                                 </Media>
                                             <hr/>
                                         </CardText> 
                                                                      
                                    </Col>
                                    <Col sm={{ size: '4', offset: 1 }}>
                                <CardTitle styleName="hot-comment">值得加入的小组</CardTitle> 
                                        <CardText >
                                        <Media>
                                            <Media top href="#">
                                                <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                            </Media>
                                            <Media body styleName="join-body">
                                                <Media heading styleName="join-group">
                                                    影视翻译交流
                                                <button styleName="attention-btn" style={styleObj} onClick={this.updateClick.bind(this)}></button>
                                                </Media>
                                                <p styleName="join-number">3831个成员</p>
                                            </Media>
                                        </Media>
                                        <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                    吸血鬼天堂影视
                                                    </Media>
                                                    <p styleName="join-number">3245个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                    全国影视资源交流小组
                                                    <button styleName="attention-btn">+关注</button>
                                                    </Media>
                                                    <p styleName="join-number">3831个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                    影视分享
                                                    </Media>
                                                    <p styleName="join-number">2831个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                    影视游击,唯恐不乱
                                                    </Media>
                                                    <p styleName="join-number">1231个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                    一起看影视
                                                    </Media>
                                                    <p styleName="join-number">2331个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                        <CardText>
                                            <Media>
                                                <Media top href="#">
                                                    <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                                </Media>
                                                <Media body styleName="join-body">
                                                    <Media heading styleName="join-group">
                                                影视Party(*_*)
                                                    </Media>
                                                    <p styleName="join-number">1456个成员</p>
                                                </Media>
                                            </Media>
                                            <hr/>
                                        </CardText> 
                                    </Col>
                                </Row>
                            </Container>
                        </TabPane>
                        <TabPane tabId="3">
                            <Container>
                                <Row>
                                    <Col sm={{ size: '6', offset: 1 }} style={{paddingLeft:20,paddingRight:260,margin:10}}>                           
                                        <Media>
                                            <Media top href="#">
                                                <img src="/images/vip/111.jpg"style={{width:64,height:64}}></img>
                                            </Media>
                                            <Media body>
                                                <Media heading styleName="top-title">
                                                {lst.username}
                                                </Media>                   
                                            </Media>
                                        </Media>  
                                        <hr/>   
                                            <CardTitle styleName="attention">追友的关注.....(成员30)</CardTitle> 
                                            <CardText styleName="text-attention">
                                            <Row>                          
                                                <Col sm="3" styleName="head-photo">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>
                                                <Col sm="3">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>
                                                <Col sm="3">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>
                                                <Col sm="3">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>                                       
                                            </Row>
                                            <Row>                          
                                                <Col sm="3">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>
                                                <Col sm="3">
                                                <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>
                                                <Col sm="3">
                                                <img src="../../../images/home/add.png" style={{width:50,height:50}}></img>                       
                                                <p>Card title</p>
                                                </Col>                                       
                                            </Row>
                                            </CardText>  
                                            <hr/>              
                                            <CardTitle>追友被30人关注</CardTitle> 
                                            <CardText styleName="text-attention">
                                                <Row> 
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>                                       
                                                </Row>                       
                                                <Row> 
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>
                                                    <Col sm="3">
                                                    <img src="/images/vip/111.jpg" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>
                                                    <Col sm="3">
                                                    <img src="../../../images/home/add.png" style={{width:50,height:50}}></img>                       
                                                    <p>Card title</p>
                                                    </Col>                                      
                                                </Row>                       
                                            </CardText>  
                                        <hr/>                                         
                                    </Col>
                                    <Col sm={{ size: '5', offset: 2 }} style={{paddingLeft:140,margin:30}}>
                                        <div styleName="main-detail">
                                            <Media >
                                                <Media>
                                                    <Media top href="#">
                                                        <img src="/images/vip/111.jpg" style={{width:128,height:128}}></img>
                                                    </Media>
                                                    <Media body>
                                                        <Media heading styleName="detail-head">
                                                            147035724
                                                            <br/>
                                                            2018-06-13加入
                                                        </Media>                        
                                                    </Media>                      
                                                </Media> 
                                                <br/>                 
                                                <hr/>
                                            </Media>
                                            <button styleName="detail-btn">关注此人+</button>
                                            <button styleName="detail-btn">发追邮</button>
                                            <button styleName="detail-btn">更多</button>
                                        </div>
                                    <CardTitle styleName="card-title">热门关注</CardTitle> 
                                    <hr/>                  
                                    <Media>
                                        <Media top href="#">
                                            <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                        </Media>
                                        <Media body>
                                            <Media heading styleName="attention-name">
                                                <span styleName="attention-span">大大大 </span> 
                                            {/*<button styleName="attention-btn">+关注</button> */}
                                            <button styleName="attention-btn" style={styleObj} onClick={this.updateClick.bind(this)}></button>  
                                            </Media>
                                                        
                                        </Media>
                                    </Media> 
                                    <hr/>  
                                    <Media>
                                        <Media top href="#">
                                            <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                        </Media>
                                        <Media body>
                                            <Media heading styleName="attention-name">
                                                <span styleName="attention-span">天下第一郭</span>                                
                                                <button styleName="attention-btn">+关注</button>
                                            </Media>
                                            
                                        </Media>
                                    </Media> 
                                    <hr/>  
                                    <Media>
                                        <Media top href="#">
                                            <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                        </Media>
                                        <Media body>
                                            <Media heading styleName="attention-name">
                                                <span styleName="attention-span">风雨蜃楼</span>                                            
                                                <button styleName="attention-btn">+关注</button>
                                            </Media>
                                        
                                        </Media>
                                    </Media> 
                                    <hr/>  
                                    <Media>
                                        <Media top href="#">
                                            <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                        </Media>
                                        <Media body>
                                            <Media heading styleName="attention-name">
                                                <span styleName="attention-span">阿珂</span>                                           
                                                <button styleName="attention-btn">+关注</button>
                                            </Media>
                                        
                                        </Media>
                                    </Media> 
                                    <hr/>  
                                    <Media>
                                        <Media top href="#">
                                            <img src="/images/vip/111.jpg" style={{width:64,height:64}}></img>
                                        </Media>
                                        <Media body>
                                            <Media heading styleName="attention-name">
                                                <span styleName="attention-span">寄居蟹</span>                                                  
                                                <button styleName="attention-btn">+关注</button>
                                            </Media>                       
                                        </Media>
                                </Media> 
                                </Col>
                                </Row>
                            </Container>
                        </TabPane>
                    </TabContent>
                </Col>
            </Row>
         </Container>
      </div>
    );
  }
}
 var communityAction = CSSModules(Community, styles,{ allowMultiple: true })
// export default CSSModules(Community, styles,{ allowMultiple: true });
export default connect( mapStateToProps,
    {fetchList})(communityAction);